<template>
  <div>
    <div class="out_k">
      <div class="foot_nav">
        <div class="foot_nav1">
          <ul>
            <li v-for="(item, index) of nav1" :key="index" @click="jump(index)">{{ item.name }}</li>
          </ul>
        </div>
        <div class="foot_nav2">
          <p>Link</p>
          <div>
            <select name id class="bg_select" v-model="couponSelected" @change="getCouponSelected">
              <option
                :value="item.name"
                v-for="(item, index) of couponList"
                :key="index"
              >{{ item.name }}</option>
            </select>
          </div>
          <div class="select_parent">
            <select name id>
              <option value>--市政府网站--</option>
            </select>
            <div class="bg_select"></div>
          </div>
          <div class="select_parent">
            <select name id>
              <option value>--各省网站--</option>
            </select>
            <div class="bg_select"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer relative_parent">
      <div class="footer_k">
        <div class="left">
          <a
            target="view_window"
            href="http://bszs.conac.cn/sitename?method=show&id=28A24350E2216A7EE053022819AC944C"
          >
            <img class="img1" src="../../assets/image/logo/blue.png" alt />
          </a>

          <p class="p2">
            舟山博物馆&nbsp;主办&nbsp;
            <a
              target="view_window"
              href="https://beian.miit.gov.cn/"
            >浙ICP备06044333号-2</a>
          </p>
        </div>
        <div class="right">
          <p class="p2">
            技术支持:&nbsp;杭州银美科技有限公司
            <a
              target="_blank"
              href="https://uweb.umeng.com/v1/login.php?siteid=1252956294"
              title="站长统计"
            >
              <img border="0" hspace="0" vspace="0" src="https://icon.cnzz.com/img/pic.gif" />
            </a>
          </p>
          <div>
            <img class="img2" src="../../assets/image/foot2.png" alt />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      nav1: [
        { name: "About us" },
        { name: "Exhibition" },
        { name: "Collection" },
        { name: "Guild" },
      ],
      couponList: [
        {
          name: "--博物馆网站--",
        },
        {
          name: "--中国国家博物馆--",
        },
        {
          name: "--浙江省博物馆--",
        },
      ],
      couponSelected: "--博物馆网站--",
    };
  },
  methods: {
    getCouponSelected(index) {
      //获取选中的优惠券

      if (index.target.value == "--博物馆网站--") {
      } else if (index.target.value == "--中国国家博物馆--") {
        window.open("http://www.chnmuseum.cn/");
        // window.location.href = ;
      } else if (index.target.value == "--浙江省博物馆--") {
        window.open("http://www.zhejiangmuseum.com");
        // window.location.href = "";
      }
    },
    jump(i) {
      if (i == 0) {
        this.$router.push(`/enApp/About`).catch((err) => {
          err;
        });
      } else if (i == 1) {
        this.$router.push(`/enApp/Exhibition`).catch((err) => {
          err;
        });
      } else if (i == 2) {
        this.$router.push(`/enApp/Collection`).catch((err) => {
          err;
        });
      } else if (i == 3) {
        this.$router.push(`/enApp/Guide`).catch((err) => {
          err;
        });
      }
    },
    enter() {
      this.h.height = "150px";
    },
    out() {
      this.h.height = 0;
    },
  },
};
</script>
<style scoped>
a {
  color: #ffffff;
  text-decoration: none;
}
/* ========== */
.footer {
  height: 50px;
  width: 100%;
  background: rgb(0, 0, 0);
  display: flex;
  color: white;
  /* position:absolute; */
  /* bottom:0px; */
  z-index: 9999;
}
.footer_k {
  width: 50%;
  display: flex;
  margin: auto;
  justify-content: space-around;
}
.footer .left {
  display: flex;
}
.footer .right {
  display: flex;
  align-items: center;
}
.footer .img1 {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}
.footer .img2 {
  height: 10px;
}
.footer .p2 {
  margin-right: 10px;
  width: 335px;
  font-size: 16px;
}
.main {
  /* height: calc(100vh - 170px); */
}

/* d底部导航 */
ul,
p,
li {
  padding: 0px;
  margin: 0px;
  cursor: pointer;
}
li {
  list-style: none;
}
.relative_parent {
  position: relative;
}
.out_k {
  background: black;
  opacity: 0.8;

  width: 100%;
  box-sizing: border-box;
  height: 150px;
}
.out_k .foot_nav {
  padding-top: 30px;
  height: 140px;
  width: 900px;
  margin: auto;

  justify-content: space-between;
  font-size: 18px;
}
.out_k .foot_nav1 ul {
  display: flex;
  color: white;

  justify-content: space-between;
}

.out_k .foot_nav1 li {
  line-height: 45px;
  color: white;
}
.out_k .foot_nav2 {
  display: flex;
  width: 100%;

  justify-content: space-between;
}
.out_k .foot_nav2 > p:first-child {
  color: white;
}
/* .select_parent {
  box-sizing: border-box;
  width: 140px;
display:flex;
position: relative;
  overflow: hidden;
  background-color: #eeeeee;
} */
.out_k select {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border: solid 1px #000;
  padding: 3px 20px;
  padding-right: 40px;
  border-radius: 3px;

  background: url("../../assets/image/select.png") no-repeat scroll right center
    transparent;
  background-color: white;
}
</style>
